<template>
	<div class="father" >
		<div class="point" @click.stop="beganDraw"><img src="../../assets/images/指针@2x.png" width="100%" /></div>
		<div class="bigDraw">
			<canvas id="my_canvas" class="luckydraw" ref="luckydraw" :width="canvasWidth" :height="canvasWidth"></canvas>
			<div class="litterDot" v-for="index in 24" :key="index" ref="litterDot"></div>
		</div>
	</div>
</template>

<script>
import api from '../../http/api.js';
var preD = function (e) {
    e.preventDefault()
}
export default {
	props: ['plateNum'], //外部传入奖品列表
	data() {
		return {
			giftList: '',
			canvasWidth: 0 //动态计算canvas宽高自适应
		};
	},
	created() {
		let clientWidth = document.documentElement.clientWidth;
		let canvasWidth = Math.floor((clientWidth * 473) / 720);
		this.canvasWidth = canvasWidth;
	},
	mounted() {
		this.getAward();
	},
	methods: {
		showCar(){
			this.$parent.showCar()
		},
		canvasd() {
			var canvas = this.$refs.luckydraw;
			var ctx = canvas.getContext('2d');
			let num = this.giftList.length; //商品数量

			// var devicePixelRatio = window.devicePixelRatio || 1;
			// var backingStoreRatio =
			// 	ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
			// var ratio = devicePixelRatio / backingStoreRatio;

			// canvas.style.width = canvas.width + 'px';
			// canvas.style.height = canvas.height + 'px';
			// canvas.width = canvas.width * ratio;
			// canvas.height = canvas.height * ratio;
			// ctx.scale(ratio, ratio);
			// ctx.translate(0.5, 0.5);
			// let ctxDom = this.$refs.luckydraw;
			// const ctx = ctxDom.getContext("2d");
			// var getPixelRatio = function (context) {
			//        var backingStore = context.backingStorePixelRatio ||
			//            context.webkitBackingStorePixelRatio ||
			//            context.mozBackingStorePixelRatio ||
			//            context.msBackingStorePixelRatio ||
			//            context.oBackingStorePixelRatio ||
			//            context.backingStorePixelRatio || 1;
			//        return (window.devicePixelRatio || 1) / backingStore;
			//    };
			//画文字

			// var ratio = getPixelRatio(ctx);

			//    myCanvas.style.width = myCanvas.width + 'px';
			//    myCanvas.style.height = myCanvas.height + 'px';

			//    myCanvas.width = myCanvas.width * ratio;
			//    myCanvas.height = myCanvas.height * ratio;
			// 放大倍数

			// ctx.scale(ratio, ratio);
			//绘制外圈圆并填充颜色
			const r = this.canvasWidth / 2; //r表示圆的半径
			ctx.beginPath();
			ctx.arc(r, r, r, 0, 2 * Math.PI);
			ctx.fillStyle = '#ffbe04';
			ctx.strokeStyle = 'transparent';
			ctx.fill();
			ctx.stroke();

			//绘制内圈圆弧
			ctx.beginPath();
			ctx.arc(r, r, r - 10, 0, 2 * Math.PI);
			ctx.strokeStyle = '#2d2d2d';
			ctx.stroke();

			//绘制扇形
			let start = -0.5 * Math.PI;
			let end = -0.5 * Math.PI + (Math.PI / num) * 2;
			let step = (Math.PI / num) * 2;
			for (let i = 0; i < 8; i++) {
				ctx.beginPath();
				ctx.moveTo(r, r);
				ctx.arc(r, r, r - 10, start + step * i, end + step * i);
				ctx.lineTo(r, r);
				if (i % 2 == 0) {
					ctx.fillStyle = '#f1f1f1';
				} else {
					ctx.fillStyle = '#ffbe04';
				}
				ctx.fill();
				ctx.closePath();
			}
			this.drawLItterDot(r); //绘制小圆点
			// this.drawText(r); //绘制文字
			ctx.textAlign = 'center';
			ctx.textBaseline = 'middle';
			ctx.fillStyle = 'black';
			// var step = 2*Math.PI/8;
			// let step = (Math.PI / num) * 2;
			for (var i = 0; i < num; i++) {
				ctx.save();
				ctx.beginPath();
				ctx.translate(r, r);
				ctx.rotate((i + 0.5) * step);
				ctx.font = '.45rem Microsoft YaHei';
				ctx.fillStyle = '#cb2230';
				// this.drawText(this.giftList[i].awardName,0,200,10);
				ctx.fillText(this.giftList[i].awardName.slice(0,5), 0, -r + 50, 120);
				ctx.fillText(this.giftList[i].awardName.slice(5,9), 0, -r + 80, 100);
				ctx.fillText(this.giftList[i].awardName.slice(9,this.giftList[i].awardName.length), 0, -r + 110, 120);
				ctx.font = ' .35rem Microsoft YaHei';
				ctx.fillText('*' + this.giftList[i].awardCount, 0, -r + 140);
				ctx.closePath();
				ctx.restore();
			}
		},
		drawText(t, x, y, w) {
		  // var canvas = this.$refs.luckydraw;
		  // var ctx = canvas.getContext('2d');
		  var chr = t.split('');
		  var temp = '';
		  var row = [];
		  ctx.font = '.4rem Arial';
		  ctx.fillStyle = 'black';
		  ctx.textBaseline = 'middle';
		  for (var a = 0; a < chr.length; a++) {
		    if (ctx.measureText(temp).width < w) {
		    } else {
		      row.push(temp);
		      temp = '';
		    }
		    temp += chr[a];
		  }
		  row.push(temp);
		  for (var b = 0; b < row.length; b++) {
		    ctx.fillText(row[b], x, y + (b + 1) * 20);
		  }
		},
		getAward(customerCode) {
			let params = {
				merchantCode: localStorage.getItem('merchantCode'),
				customerCode
			};
			api.getAward(params).then(res => {
				if (res.code == '10000') {
					this.giftList = res.data.awardList;
					this.$parent.stratTime = res.data.startTime;
					this.$parent.endTime = res.data.endTime;
					this.$parent.describe1 = res.data.describe1;
					this.$parent.describe2 = res.data.describe2;
					this.canvasd();
				} else {
					alert(res.message);
				}
			});
		},
		//绘制小圆点
		drawLItterDot(r) {
			let litterDotArr = this.$refs.litterDot; //小圆点Dom数组
			for (let i = 0; i < 24; i++) {
				litterDotArr[i].setAttribute('style', `transform:rotate(${i * 15}deg);transform-origin: 4px ${r - 1}px`);
				// litterDotArr[i].style.transform = `rotate(${i * 15}deg)`;
				// litterDotArr[i].style.transform=`transform-origin: 3px ${r}px`;
				if (i % 3 == 0) {
					litterDotArr[i].style.background = 'red';
				}
			}
		},
		//绘制大圆盘文字
		drawText(r) {
			let num = this.giftList.length;
			// let ctxDom = this.$refs.luckydraw;
			// const ctx = ctxDom.getContext("2d");
			// var getPixelRatio = function (context) {
			//        var backingStore = context.backingStorePixelRatio ||
			//            context.webkitBackingStorePixelRatio ||
			//            context.mozBackingStorePixelRatio ||
			//            context.msBackingStorePixelRatio ||
			//            context.oBackingStorePixelRatio ||
			//            context.backingStorePixelRatio || 1;
			//        return (window.devicePixelRatio || 1) / backingStore;
			//    };
			//画文字
			var myCanvas = this.$refs.luckydraw;
			var ctx = myCanvas.getContext('2d');
			// var canvas = this.$refs.luckydraw;
			// var ctx = canvas.getContext('2d');
			// let num = this.giftList.length; //商品数量

			// var devicePixelRatio = window.devicePixelRatio || 1;
			// var backingStoreRatio =
			// 	ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
			// var ratio = devicePixelRatio / backingStoreRatio;

			//  canvas.style.width=canvas.width+"px";
			//     canvas.style.height = canvas.height+"px";
			//     canvas.width = canvas.width * ratio;
			//     canvas.height = canvas.height * ratio;
			// 		 ctx.scale(ratio, ratio);
			// 		    ctx.translate(0.5, 0.5);

			//    var ratio = getPixelRatio(ctx);
			// console.log(1,myCanvas.width* ratio)
			//    myCanvas.style.width = myCanvas.width + 'px';
			//    myCanvas.style.height = myCanvas.height + 'px';

			//    myCanvas.width = myCanvas.width * ratio;
			//    myCanvas.height = myCanvas.height * ratio;

			// 放大倍数
			// ctx.scale(ratio, ratio);

			// console.log(ctxDom);
			ctx.textAlign = 'start';
			ctx.textBaseline = 'middle';
			ctx.fillStyle = 'black';
			// var step = 2*Math.PI/8;
			let step = (Math.PI / num) * 2;
			for (var i = 0; i < num; i++) {
				ctx.save();
				ctx.beginPath();
				ctx.translate(r, r);
				ctx.rotate((i + 0.5) * step);
				ctx.font = ' 16px Microsoft YaHei';
				ctx.fillStyle = 'black';
				ctx.fillText(this.giftList[i].awardName, -30, -r + 30, 60);
				ctx.font = ' 14px Microsoft YaHei';
				ctx.fillText('*' + this.giftList[i].awardCount, -5, -r + 70);
				ctx.closePath();
				ctx.restore();
			}
		},
		//点击指针开始抽奖
		beganDraw() {
			console.log('点击了canvasLuckyDraw组件中的指针,开始抽奖');
			document.body.style.overflow = 'hidden';
			document.addEventListener('touchmove', preD, { passive: false }); // 禁止页面滑动
			setTimeout(()=>{
				document.body.style.overflow = ''; // 出现滚动条
				document.removeEventListener('touchmove', preD, { passive: false });
			},3500)
			this.$emit('beganDraw');
		}
	}
};
</script>

<style lang="scss" scoped>
	.father{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 45%;
	}
.point {
	position: absolute;
	width: 13%;
	height: 33%;
	left: 50%;
	top: 60%;
	margin-left: -6.5%;
	z-index: 80;
}
.bigDraw {
	width: 100%;
	position: relative;
	.luckydraw {
		display: block;
		margin: 0 auto;
	}
	.litterDot {
		height: 13px;
		width: 13px;
		border-radius: 50%;
		background: #ffffff;
		position: absolute;
		left: 50%;
		margin-left: -3.5px;
		top: 2px;
		// box-shadow:0px 0px 15px #333333;
		// filter: blur(1px);
	}
}
</style>
